<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - Ye的大模型</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
        }

        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #409EFF;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #app {
            display: none;
        }

        .register-container {
            width: 400px;
            padding: 50px 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            backdrop-filter: blur(10px);
        }

        .welcome-icon {
            text-align: center;
            margin-bottom: 20px;
            color: #409EFF;
        }

        .animated-icon {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .artistic-title {
            font-family: 'Pacifico', cursive;
            font-size: 2.5rem;
            color: #409EFF;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        .el-input {
            font-size: 18px;
            height: 50px;
        }

        .el-input__wrapper {
            border-radius: 8px;
            padding: 12px 16px;
        }

        .el-button {
            transition: all 0.3s ease;
        }

        .el-button--primary {
            background: linear-gradient(45deg, #409EFF, #66b1ff);
            border: none;
        }

        .el-button--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
        }

        .el-button:not(.el-button--primary) {
            background: linear-gradient(45deg, #f5f7fa, #e6e9ed);
            border: none;
        }

        .el-button:not(.el-button--primary):hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div id="loading">
        <div class="loader"></div>
    </div>
    <div id="app">
        <el-container>
            <el-main>
                <div class="register-container">
                    <div class="welcome-icon">
                        <el-icon :size="60" class="animated-icon">
                            <icon-user-filled />
                        </el-icon>
                    </div>
                    <h2 class="artistic-title" style="text-align: center; margin-bottom: 20px;">欢迎你加入Ye</h2>

                    <el-form :model="form" :rules="rules" ref="registerForm"
                        style="display: flex; flex-direction: column; align-items: center;">
                        <el-form-item prop="username">
                            <el-input v-model="form.username" placeholder="用户名" style="width: 300px;">
                                <template #suffix>
                                    <el-tooltip content="清空输入" placement="top">
                                        <el-icon @click="form.username = ''" style="cursor: pointer;">
                                            <icon-close />
                                        </el-icon>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="password">
                            <el-input v-model="form.password" type="password" placeholder="密码" style="width: 300px;">
                                <template #suffix>
                                    <el-tooltip content="清空输入" placement="top">
                                        <el-icon @click="form.password = ''" style="cursor: pointer;">
                                            <icon-close />
                                        </el-icon>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="confirmPassword">
                            <el-input v-model="form.confirmPassword" type="password" placeholder="确认密码"
                                style="width: 300px;">
                                <template #suffix>
                                    <el-tooltip content="清空输入" placement="top">
                                        <el-icon @click="form.confirmPassword = ''" style="cursor: pointer;">
                                            <icon-close />
                                        </el-icon>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="handleRegister"
                                style="width: 140px; height: 40px; font-size: 16px;">
                                注册
                            </el-button>
                            <el-button @click="goToLogin"
                                style="width: 140px; height: 40px; font-size: 16px; margin-left: 20px;">
                                返回登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>

    <script>
        // Show main content when page is fully loaded
        window.addEventListener('load', () => {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('app').style.display = 'block';
        });

        const { createApp, ref } = Vue;
        const { ElMessage } = ElementPlus;
        const { Close, User, UserFilled } = ElementPlusIconsVue;

        const app = createApp({
            setup() {
                const form = ref({
                    username: '',
                    password: '',
                    confirmPassword: ''
                });

                const validatePassword = (rule, value, callback) => {
                    if (value !== form.value.password) {
                        callback(new Error('两次输入的密码不一致'));
                    } else {
                        callback();
                    }
                };

                async function sha256(message) {
                    const msgBuffer = new TextEncoder().encode(message);
                    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
                    const hashArray = Array.from(new Uint8Array(hashBuffer));
                    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
                }

                const rules = ref({
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, message: '请确认密码', trigger: 'blur' },
                        { validator: validatePassword, trigger: 'blur' }
                    ]
                });

                const handleRegister = async () => {
                    try {
                        const hashedPassword = await sha256(form.value.password);
                        // 调用注册接口
                        const response = await fetch('/userInfo/register', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                userName: form.value.username,
                                password: hashedPassword
                            })
                        });

                        const data = await response.json();
                        if (data.code === 200) {
                            ElMessage.success('注册成功');
                            window.location.href = 'index.html#login';
                        } else {
                            ElMessage.error(data.message || '注册失败');
                        }
                    } catch (error) {
                        console.error('Error:', error);
                        ElMessage.error('注册请求失败');
                    }
                };

                const goToLogin = () => {
                    window.location.href = 'index.html';
                };

                return {
                    form,
                    rules,
                    handleRegister,
                    goToLogin
                };
            }
        });

        app.component('icon-close', Close);
        app.component('icon-user', User);
        app.component('icon-user-filled', UserFilled);
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>

</html>